<template>
  <div>
    <h2>guide</h2>
    <h2 @click="changeCount(20)">count -- {{ count }}</h2>
    <h2 @click="changeNum"> num-- {{num}}</h2>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary" @click="add">n =   {{n}}</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </el-row>
  </div>
</template>

<script setup> 
import {ref, toRefs ,reactive} from 'vue';
const num = ref(1000)  //ref 绑定数据的

// 第一种
const changeNum = ()=>{
    console.log('changeNum');
    console.log(num);
    // num = num + 1;  //没有响应式    
   num .value+=1;
}

//第二种 
let state = reactive({ //reactive 绑定数据 只能绑定对象和数组
    n:2000
})
// 方法不用暴露
const add =()=>{
    state.n++;
}

const {n} = toRefs(state)  // 暴露state里面的变量 


// export default {

// };
</script>